





<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>音乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 300vh;
        }
        #music{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        audio {
            width: 50px;
            height: 50px;
            display: none;
        }
        #bf {
            width: 50px;
            height: 50px;
            position: relative;
        }
        .music-bg {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background-image: url("./images/d.jpg");
            background-size: cover;
            animation: music-play 7s linear infinite;
        }
        .music-play{
            animation-play-state:paused;
        }
        .play,.stop {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .play::after {
            content: '';
            height: 0;
            width: 0;
            display: block;
            border: 11px transparent solid;
            border-right-width: 0;
            border-left-color: #333;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .stop:after, .stop:before{
            content: '';
            height: 20px;
            width: 4px;
            display: block;
            background: #333;
            position: absolute;
            top: 50%;
            left: 18px;
            transform: translateY(-50%);
        }
        .stop:after {
            left: 28px;
        }
        @keyframes music-play {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>asdasd
<div id="music">
    <audio src="./music/goTime.mp3" autoplay loop id="music1" preload="auto"></audio>
    <button id="asd">播放</button>
    <button id="bf">暂停</button>
</div>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script>
    window.onload = function(){
        function autoPlayAudio() {
            wx.config({
                // 配置信息, 即使不正确也能使用 wx.ready
                debug: false
                , appId: ''
                , timestamp: 1
                , nonceStr: ''
                , signature: ''
                , jsApiList: []
            });
            wx.ready(function () {
                document.getElementById("music1").play();
            });
        }
        autoPlayAudio();
    }
    var btn = document.getElementById("bf"),
        asd = document.getElementById("asd");
    btn.onclick=function () {
        document.getElementById("music1").pause();
    }
    asd.onclick=function () {
        document.getElementById("music1").play();
    }
</script>
</body>
</html>